<template>
    <div>
        <!-- transition-group 并且该标签内的元素要有唯一的key -->
        <h1>动画</h1>
        <el-button @click="isShow1=!isShow1">显示/隐藏</el-button>
        <!-- appear表示一开始就生效 -->
       <transition name="myactive" appear>
            <h2 class="myanimation" v-show="isShow1">Vue动画效果</h2>
       </transition>
       <hr>
       <h1>过渡</h1>
        <el-button @click="isShow2=!isShow2">显示/隐藏</el-button>
       <transition name="mytransition" appear>
            <h2 class="mytransform" v-show="isShow2">Vue过渡效果</h2>
       </transition>
       <hr>
       <h1>引入三方库的样式</h1>
       <el-button @click="isShow3=!isShow3">显示/隐藏</el-button>
       <transition appear
        name="animate__animated animate__bounce"
        enter-active-class="animate__swing"
        leave-active-class="animate__bounceOutUp"
       >
            <h2 class="mytransformother" v-show="isShow3">npm第三方库动画效果</h2>
       </transition>
    </div>
</template>
<script>
// 引入第三方库的动画库
import "animate.css"
export default {
    data(){
        return {
            isShow1:true,
            isShow2:true,
            isShow3:true,
        }
    }
}
</script>
<style scoped>
    .myanimation{
        background-color: orange;
    }

    /* 如果动画标签没有有name属性时 */
    /* .v-enter-active{
        animation: myAnimation 1s linear;
    }
    .v-leave-active{
        animation: myAnimation 1s linear reverse;
    } */
    .myactive-enter-active{
        animation: myAnimation 1s linear;
    }
    .myactive-leave-active{
        animation: myAnimation 1s linear reverse;
    }
    @keyframes myAnimation {
        from{
           transform: translateX(-100%); 
        }
        to{
            transform: translateX(0px);
        }
    }


    /* 过渡的效果 */
    .mytransform {
        background-color: orange;
    }
    
    /* 进入的起点、离开的终点 */
    .mytransition-enter,.mytransition-leave-to {
        transform: translateX(-100%); 
    }
    /* 进入的终点、离开的起点 */
    .mytransition-enter-to,.mytransition-leave {
        transform: translateX(0); 
    }
    .mytransition-enter-active,.mytransition-leave-active {
        transition: 1s linear;
    }


    /* 引入第三方库的动画 */
    .mytransformother {
        background-color: orange;
    }
</style>